<div class="row">
    <div class="twelve columns">
        <div class="content body">
            <div class="row">
                <div class="ten columns centered">
                    <div class="panel">
                        <p>This is your account's profile. Click on a field to edit, or click on Edit All button to edit all fields simultaneously. Fields with (<span style="color: red;">*</span>) mark are not editable.</p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="three columns">
                    <label class="right" for="profile_image"><strong>Profile Image :</strong></label>
                </div>
                <div class="nine columns">
                    <div class="row">
                        <div class="twelve columns">
                            <a ui-if="!pUser.user.img" href="#" class="th"><img src=""></a>
                            <a ui-if="pUser.user.img" href="#" class="th" ng-bind-html-unsafe="pUser.user.img"></a>
                            <!-- <img id="userImgOrig" ui-if="!pUser.user.img" src="http://placehold.it/100x100&text=No+Image" alt=""> -->
                            
                        </div>
                    </div>
                    <div class="row">
                        <div class="twelve columns">
                            <div><i>Maximum allowed image size is 500Kb</i></div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="twelve columns">
                            <input type="file" name="userimage" id="userimage" ajax-upload="opt.loaded" style="display: none;">
                            <button class="button small radius" choose-file>Choose File</button>
                            <button class="button small alert radius" style="display: none;">Cancel</button>
                            <button class="button small success radius" style="display: none;">Upload</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="three columns">
                    <label class="editable right" for="display"><strong>Display Name :</strong></label>
                </div>
                <div class="five columns">
                    <div edit-profile class="editable fields"><strong>{{ pUser.user.display }}</strong></div>
                    <input type="text" id="display" name="display" ng-model="pUser.user.display" style="display: none;">
                </div>
                <div class="four columns">
                    <button save-profile="display" class="button success tiny radius" style="display: none;">Save</button>
                    <button reset-profile="display" class="button secondary tiny radius" style="display: none;">Cancel</button>
                </div>
            </div>

            <div class="row">
                <div class="three columns">
                    <label class="right" for="email"><strong>Email <span style="color: red;">*</span> :</strong></label>
                </div>
                <div class="nine columns">
                    <div>{{ pUser.user.email }}</div>
                </div>
            </div>

            <div class="row">
                <div class="three columns">
                    <label class="editable right" for="firstname"><strong>Real Name :</strong></label>
                </div>
                <div class="five columns">
                    <div edit-profile class="editable fields">{{ pUser.user.name }}</div>
                    <input type="text" id="firstname" name="firstname" ng-model="pUser.user.name" style="display: none;">
                </div>
                <div class="four columns">
                    <button save-profile="firstname" class="button success tiny radius" style="display: none;">Save</button>
                    <button reset-profile="firstname" class="button secondary tiny radius" style="display: none;">Cancel</button>
                </div>
            </div>

            <!-- <div class="row">
                <div class="three columns">
                    <label class="editable right" for="lastname"><strong>Last Name :</strong></label>
                </div>
                <div class="five columns">
                    <div edit-profile class="editable fields">{{ pUser.user.last_name }}</div>
                    <input type="text" id="lastname" name="lastname" ng-model="pUser.user.last_name" style="display: none;">
                </div>
                <div class="four columns">
                    <button save-profile="lastname" class="button success tiny radius" style="display: none;">Save</button>
                    <button reset-profile="lastname" class="button secondary tiny radius" style="display: none;">Cancel</button>
                </div>
            </div> -->

            <div class="row">
                <div class="three columns">
                    <label class="editable right" for="address"><strong>Address :</strong></label>
                </div>
                <div class="five columns">
                    <div edit-profile class="editable fields">{{ pUser.user.address }}</div>
                    <input type="text" id="address" name="address" ng-model="pUser.user.address" style="display: none;">
                </div>
                <div class="four columns">
                    <button save-profile="address" class="button success tiny radius" style="display: none;">Save</button>
                    <button reset-profile="address" class="button secondary tiny radius" style="display: none;">Cancel</button>
                </div>
            </div>

            <div class="row">
                <div class="three columns">
                    <label class="editable right" for="phone"><strong>Phone Number :</strong></label>
                </div>
                <div class="five columns">
                    <div edit-profile class="editable fields">{{ pUser.user.phone }}</div>
                    <input type="text" id="phone" name="phone" ng-model="pUser.user.phone" style="display: none;">
                </div>
                <div class="four columns">
                    <button save-profile="phone" class="button success tiny radius" style="display: none;">Save</button>
                    <button reset-profile="phone" class="button secondary tiny radius" style="display: none;">Cancel</button>
                </div>
            </div>

            <div class="row">
                <div class="three columns">
                    <label class="editable right" for="dob"><strong>Date of Birth :</strong></label>
                </div>
                <div class="five columns">
                    <div edit-profile class="editable fields">{{ pUser.user.dob }}</div>
                    <div id="dob" style="display: none;">
                        <select class="two" ui-select2 name="dob_d" id="dob_d" ng-model="pUser.user.dob_d">
                            <option value="" data-placeholder>Date</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                            <option value="9">9</option>
                            <option value="10">10</option>
                            <option value="11">11</option>
                            <option value="12">12</option>
                            <option value="13">13</option>
                            <option value="14">14</option>
                            <option value="15">15</option>
                            <option value="16">16</option>
                            <option value="17">17</option>
                            <option value="18">18</option>
                            <option value="19">19</option>
                            <option value="20">20</option>
                            <option value="21">21</option>
                            <option value="22">22</option>
                            <option value="23">23</option>
                            <option value="24">24</option>
                            <option value="25">25</option>
                            <option value="26">26</option>
                            <option value="27">27</option>
                            <option value="28">28</option>
                            <option value="29">29</option>
                            <option value="30">30</option>
                            <option value="31">31</option>
                        </select>
                        <select class="five" ui-select2 name="dob_m" id="dob_m" ng-model="pUser.user.dob_m">
                            <option value="" data-placeholder>Month</option>
                            <option value="0">January</option>
                            <option value="1">February</option>
                            <option value="2">March</option>
                            <option value="3">April</option>
                            <option value="4">May</option>
                            <option value="5">June</option>
                            <option value="6">July</option>
                            <option value="7">August</option>
                            <option value="8">September</option>
                            <option value="9">October</option>
                            <option value="10">November</option>
                            <option value="11">December</option>
                        </select>
                        <select class="three" ui-select2 name="dob_y" id="dob_y" ng-model="pUser.user.dob_y">
                            <option value="" data-placeholder>Year</option>
                            <option value="2013">2013</option>
                            <option value="2012">2012</option>
                            <option value="2011">2011</option>
                            <option value="2010">2010</option>
                            <option value="2009">2009</option>
                            <option value="2008">2008</option>
                            <option value="2007">2007</option>
                            <option value="2006">2006</option>
                            <option value="2005">2005</option>
                            <option value="2004">2004</option>
                            <option value="2003">2003</option>
                            <option value="2002">2002</option>
                            <option value="2001">2001</option>
                            <option value="2000">2000</option>
                            <option value="1999">1999</option>
                            <option value="1998">1998</option>
                            <option value="1997">1997</option>
                            <option value="1996">1996</option>
                            <option value="1995">1995</option>
                            <option value="1994">1994</option>
                            <option value="1993">1993</option>
                            <option value="1992">1992</option>
                            <option value="1991">1991</option>
                            <option value="1990">1990</option>
                            <option value="1989">1989</option>
                            <option value="1988" selected="selected">1988</option>
                            <option value="1987">1987</option>
                            <option value="1986">1986</option>
                            <option value="1985">1985</option>
                            <option value="1984">1984</option>
                            <option value="1983">1983</option>
                            <option value="1982">1982</option>
                            <option value="1981">1981</option>
                            <option value="1980">1980</option>
                            <option value="1979">1979</option>
                            <option value="1978">1978</option>
                            <option value="1977">1977</option>
                            <option value="1976">1976</option>
                            <option value="1975">1975</option>
                            <option value="1974">1974</option>
                            <option value="1973">1973</option>
                            <option value="1972">1972</option>
                            <option value="1971">1971</option>
                            <option value="1970">1970</option>
                            <option value="1969">1969</option>
                            <option value="1968">1968</option>
                            <option value="1967">1967</option>
                            <option value="1966">1966</option>
                            <option value="1965">1965</option>
                            <option value="1964">1964</option>
                            <option value="1963">1963</option>
                            <option value="1962">1962</option>
                            <option value="1961">1961</option>
                            <option value="1960">1960</option>
                            <option value="1959">1959</option>
                            <option value="1958">1958</option>
                            <option value="1957">1957</option>
                            <option value="1956">1956</option>
                            <option value="1955">1955</option>
                            <option value="1954">1954</option>
                            <option value="1953">1953</option>
                            <option value="1952">1952</option>
                            <option value="1951">1951</option>
                            <option value="1950">1950</option>
                            <option value="1949">1949</option>
                            <option value="1948">1948</option>
                            <option value="1947">1947</option>
                            <option value="1946">1946</option>
                            <option value="1945">1945</option>
                            <option value="1944">1944</option>
                            <option value="1943">1943</option>
                            <option value="1942">1942</option>
                            <option value="1941">1941</option>
                            <option value="1940">1940</option>
                            <option value="1939">1939</option>
                            <option value="1938">1938</option>
                        </select>
                    </div>
                </div>
                <div class="four columns">
                    <button save-profile="dob" class="button success tiny radius" style="display: none;">Save</button>
                    <button reset-profile="dob" class="button secondary tiny radius" style="display: none;">Cancel</button>
                </div>
            </div>

            <div class="row">
                <div class="three columns">
                    <label class="editable right" for="bio"><strong>About Me :</strong></label>
                </div>
                <div class="eight columns end">
                    <div edit-profile class="editable fields" ng-bind-html="pUser.user.bio"></div>
                    <button save-profile="bio" class="button success tiny radius" style="display: none;">Save</button>
                    <button reset-profile="bio" class="button secondary tiny radius" style="display: none;">Cancel</button>
                </div>
                <!-- <div class="four columns">
                    <button save-profile="bio" class="button success tiny radius" style="display: none;">Save</button>
                    <button reset-profile="bio" class="button secondary tiny radius" style="display: none;">Cancel</button>
                </div> -->
            </div>
            <div class="row">
                <div class="ten columns centered">
                    <div id="bio" style="display: none;">
                        <div id="bio_t-toolbar" class="text-toolbar">
                            <div class="toolbars">
                                <div data-wysihtml5-command="bold" title="Make text bold (CTRL + B)" class="command"><div><i class="icon-bold"></i></div></div>
                                <div data-wysihtml5-command="italic" title="Make text italic (CTRL + I)" class="command"><div><i class="icon-italic"></i></div></div>
                                <div data-wysihtml5-command="underline" title="Make text underline (CTRL + U)" class="command"><div><i class="icon-underline"></i></div></div>
                                <div data-wysihtml5-command="insertUnorderedList" title="Insert an unordered list" class="command"><div><i class="icon-list-ul"></i></div></div>
                                <div data-wysihtml5-command="insertOrderedList" title="Insert an ordered list" class="command"><div><i class="icon-list-ol"></i></div></div>
                                <div data-wysihtml5-command="justifyLeft" title="Align to left" class="command"><div><i class="icon-align-left"></i></div></div>
                                <div data-wysihtml5-command="justifyCenter" title="Align to center" class="command"><div><i class="icon-align-center"></i></div></div>
                                <div data-wysihtml5-command="justifyRight" title="Align to right" class="command"><div><i class="icon-align-right"></i></div></div>
                                <div data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="p" class="command"><div>P</div></div>
                                <div data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h1" class="command"><div>H1</div></div>
                                <div data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h2" class="command"><div>H2</div></div>
                                <div data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h3" class="command"><div>H3</div></div>
                                <div data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h4" class="command"><div>H4</div></div>
                                <div data-wysihtml5-command="createLink" title="Create Link" class="command"><div><i class="icon-link"></i></div></div>
                                <div data-wysihtml5-dialog="createLink" style="display: none;">
                                    <label>Link: <input data-wysihtml5-dialog-field="href" value="http://" class="text"></label>
                                    <a data-wysihtml5-dialog-action="save">OK</a> <a data-wysihtml5-dialog-action="cancel">Cancel</a>
                                </div>
                                <div data-wysihtml5-action="change_view" title="Show HTML" class="action"><div><\></div></div>
                                <div data-wysihtml5-command-group="foreColor" class="command" title="Color the selected text">
                                    <div class="fore-color">C
                                        <ul>
                                            <li data-wysihtml5-command="foreColor" data-wysihtml5-command-value="silver"></li>
                                            <li data-wysihtml5-command="foreColor" data-wysihtml5-command-value="gray"></li>
                                            <li data-wysihtml5-command="foreColor" data-wysihtml5-command-value="maroon"></li>
                                            <li data-wysihtml5-command="foreColor" data-wysihtml5-command-value="red"></li>
                                            <li data-wysihtml5-command="foreColor" data-wysihtml5-command-value="purple"></li>
                                            <li data-wysihtml5-command="foreColor" data-wysihtml5-command-value="green"></li>
                                            <li data-wysihtml5-command="foreColor" data-wysihtml5-command-value="olive"></li>
                                            <li data-wysihtml5-command="foreColor" data-wysihtml5-command-value="navy"></li>
                                            <li data-wysihtml5-command="foreColor" data-wysihtml5-command-value="blue"></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <textarea text-editor="pUser.user.bio" id="bio_t" name="bio_t" ng-model="pUser.user.bio"></textarea>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="three columns">
                    
                </div>
                <div class="nine columns">
                    <div>
                        <button edit-all class="button radius">Edit All</button>
                        <button save-all class="button radius success" style="display: none;">Save All</button>
                        <!-- <button reset-all class="button radius alert" style="display: none;">Reset All</button> -->
                        <button cancel-all class="button radius alert" style="display: none;">Cancel</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>